<template>
  <div style="height:100%">
    <breadcrumb :breadList="breadList" :name="name" style="margin-bottom: 12px;" v-if="$route.query.type !== 'detail'">
      <div class="handle-box" slot="handleContent">
        <div class="handle-btn">
          <a-button class="common-btn">保存</a-button>
        </div>
        <div class="handle-btn">
          <a-button class="common-btn" @click="addEquipmentDetails">添加设备明细</a-button>
        </div>
      </div>
    </breadcrumb>
    <a-card class="card" :title="code" :bordered="false"></a-card>
    <a-card class="card" title="供应商基本信息" :bordered="false">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="供应商名称" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.name', {initialValue: currentPro.name, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="供应商类型" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-select :disabled="disabled" v-decorator="['queryParam.type', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 270px;">
                <a-select-option value="1">设备厂商</a-select-option>
                <a-select-option value="2">施工企业</a-select-option>
                <a-select-option value="3">监理企业</a-select-option>
                <a-select-option value="4">设计企业</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="20" :md="12" :sm="24">
            <div class="spec-row">
              <a-form-item label="供应商注册地" class="spec-item" :labelCol="{lg: {span: 4}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <div style="display:flex;">
                  <a-form-item>
                    <a-select defaultValue="山西省" :disabled="disabled" v-decorator="['queryParam.pro', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 150px;">
                      <a-select-option value="1">山西省</a-select-option>
                      <a-select-option value="2">山东省</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select defaultValue="太原市" :disabled="disabled" v-decorator="['queryParam.city', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 150px;">
                      <a-select-option value="1">太原市</a-select-option>
                      <a-select-option value="2">未知市</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select defaultValue="小店区" :disabled="disabled" v-decorator="['queryParam.count', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 150px;">
                      <a-select-option value="1">小店区</a-select-option>
                      <a-select-option value="2">未知区</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-input :disabled="disabled" v-decorator="['queryParam.details', {initialValue: '', rules: [{required: false, message: ''}]}]" placeholder="详细地址" style="width: 275px;"/>
                  </a-form-item>
                </div>
              </a-form-item>
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="16" style="margin-bottom:0px;">
          <a-col :lg="20" :md="12" :sm="24">
            <div class="spec-row">
              <a-form-item label="供应商经营地" class="spec-item" :labelCol="{lg: {span: 4}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
                <div style="display:flex;margin-left:0px;">
                  <a-form-item>
                    <a-select :disabled="disabled" v-decorator="['queryParam.provice', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 150px;">
                      <a-select-option value="1">山西省</a-select-option>
                      <a-select-option value="2">山东省</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select :disabled="disabled" v-decorator="['queryParam.citys', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 150px;">
                      <a-select-option value="1">太原市</a-select-option>
                      <a-select-option value="2">未知市</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-select :disabled="disabled" v-decorator="['queryParam.counts', {initialValue: '1', rules: [{required: false, message: ''}]}]" style="width: 150px;">
                      <a-select-option value="1">小店区</a-select-option>
                      <a-select-option value="2">未知区</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item>
                    <a-input
                      :disabled="disabled"
                      v-decorator="['queryParam.detailsTwo', {initialValue: '', rules: [{required: false, message: ''}]}]"
                      placeholder="详细地址"
                      style="width: 275px;"/>
                  </a-form-item>
                </div>
              </a-form-item>
            </div>
          </a-col>
          <a-col :lg="1" :md="12" :sm="24" :offset="2">
            <a-form-item label="" :colon="false">
              <a-button class="common-btn" @click="sameValue">同注册地</a-button>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="联系人" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.personName', {initialValue: currentPro.person, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="联系电话" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input-number :disabled="disabled" v-decorator="['queryParam.phone', {initialValue: currentPro.phone, rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item label="联系人邮箱" :labelCol="{lg: {span: 6}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <a-input :disabled="disabled" v-decorator="['queryParam.emil', {initialValue: '', rules: [{required: false, message: ''}]}]" placeholder="" style="width: 270px;"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card class="card" title="资料上传" :bordered="false">
      <a-form>
        <a-row :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="供应目录" :labelCol="{lg: {span: 3}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <div style="width:200px;display:flex;" >
                <a-upload
                  v-if="isShow"
                  name="file"
                  :multiple="true"
                  action="//jsonplaceholder.typicode.com/posts/"
                  :headers="headers"
                  @change="handleChange">
                  <a>
                    上传
                  </a>
                </a-upload>
                <a style="margin:0 10px">下载</a>
                <a>查看</a>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="质量保证书" :labelCol="{lg: {span: 3}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <div style="width:200px;display:flex;" >
                <a-upload
                  v-if="isShow"
                  name="file"
                  :multiple="true"
                  action="//jsonplaceholder.typicode.com/posts/"
                  :headers="headers"
                  @change="handleChange">
                  <a>
                    上传
                  </a>
                </a-upload>
                <a style="margin:0 10px">下载</a>
                <a>查看</a>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="说明书" :labelCol="{lg: {span: 3}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <div style="width:200px;display:flex;" >
                <a-upload
                  v-if="isShow"
                  name="file"
                  :multiple="true"
                  action="//jsonplaceholder.typicode.com/posts/"
                  :headers="headers"
                  @change="handleChange">
                  <a>
                    上传
                  </a>
                </a-upload>
                <a style="margin:0 10px">下载</a>
                <a>查看</a>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="导入产品" :labelCol="{lg: {span: 3}, sm: {span: 7}}" :wrapperCol="{lg: {span: 12}, sm: {span: 17} }">
              <div style="width:200px;display:flex;" >
                <a-upload
                  v-if="isShow"
                  name="file"
                  :multiple="true"
                  action="//jsonplaceholder.typicode.com/posts/"
                  :headers="headers"
                  @change="handleChange">
                  <a>
                    上传
                  </a>
                </a-upload>
                <a style="margin:0 10px">下载</a>
                <a>查看</a>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import GlobalHeader from '@/components/GlobalHeader'
import Breadcrumb from '@/components/tools/Breadcrumb'
import Cascader from 'ant-design-vue/lib/cascader'
export default {
  name: 'AddSupplier',
  components: {
    GlobalHeader,
    Breadcrumb,
    'a-cascader': Cascader
  },
  data () {
    return {
      name: '',
      breadList: [],
      code: '供应商编号：010-888888',
      queryParam: {},
      disabled: false,
      isShow: true,
      currentType: '', // 当前页面所属
      currentPro: {}, // 当前产品详情
      form: this.$form.createForm(this),
      headers: {
        authorization: 'authorization-text'
      },
      options: [{
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [{
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [{
            value: 'xihu',
            label: 'West Lake'
          }]
        }]
      }, {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [{
          value: 'nanjing',
          label: 'Nanjing',
          children: [{
            value: 'zhonghuamen',
            label: 'Zhong Hua Men'
          }]
        }]
      }]
    }
  },
  created () {
    this.getBreadCrumb()
    this.currentType = this.$route.query.type
    this.currentPro = JSON.parse(this.$route.query.proDetails)
    console.log('当前详情', this.currentType, this.currentPro)
    this.getBreadCrumb()
    if (this.$route.query.type !== 'create' && this.$route.query.type !== 'modify') {
      this.disabled = true
      this.isShow = false
    } else {
      this.disabled = false
      this.isShow = true
    }
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
      switch (this.$route.query.type) {
        case 'detail':
          this.breadList[2].meta.title = '供应商详情'
          break
        case 'modify':
          this.breadList[2].meta.title = '编辑供应商'
          break
        default:
          this.breadList[2].meta.title = '添加供应商'
          break
      }
    },
    onChange (value) {
      console.log(value)
    },
    handleChange (info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    sameValue () {
      this.$success({
        title: '供应商经营地同供应商经营地设置成功'
      })
    },
    addEquipmentDetails () {
      this.$router.push({
        name: 'addEquipmentDetails'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.spec-row {
  margin-left: -16px;
}
.spec-item {
  margin-bottom: 0px;
}
</style>
